<template>
  <div>
    <button @click="zoomOut" ref="zoomOut">缩小</button>
    <button @click="zoomIn" ref="zoomIn">放大</button>
    <button @click="showContent">获取</button>
    <js-mind
      :values="mind1"
      :options="options1"
      v-show="isShow1"
      ref="jsMind"
      height="80vh"
      style="border: 1px solid #eee"
    ></js-mind>
    <js-mind
      :values="mind2"
      :options="options2"
      v-show="isShow2"
      ref="jsMind"
      height="70vh"
      style="border: 1px solid #eee"
    ></js-mind>
  </div>
</template>

<script>
export default ({
  data() {
    return {
      options1: {
        container: 'jsmind_container1', // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: 'success', // [可选] 主题

      },
      options2: {
        container: 'jsmind_container2', // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: 'primary' // [可选] 主题
      },
      isShow1: true,
      isShow2: true,
      mind1: {
        meta: {
          name: "jsMind",
          author: "CMH",
          version: "0.2"
        },
        format: "node_tree",
        data: {
          id: "head",
          topic: "甲線",
          children: [
            {
              id: 1,
              topic: "1~8棟宿舍",
              direction: "left",
              expanded: true,
              children: [
                {
                  id: 5,
                  topic: "TR3總表",
                  expanded: true,
                  children: [
                    { id: 11, topic: "1棟宿舍" },
                    { id: 12, topic: "2棟宿舍" },
                    { id: 13, topic: "3棟宿舍" },
                    { id: 14, topic: "4棟宿舍" },
                    { id: 15, topic: "1#冰機" },
                    { id: 16, topic: "2#冰機" },
                    { id: 17, topic: "水泵1" },
                    { id: 18, topic: "水泵1" }
                  ]
                },
                {
                  id: 6,
                  topic: "TR4總表",
                  expanded: true,
                  children: [
                    { id: 19, topic: "5棟宿舍" },
                    { id: 20, topic: "6棟宿舍" },
                    { id: 21, topic: "7棟宿舍" },
                    { id: 22, topic: "8棟宿舍" },
                    { id: 23, topic: "廚房1" },
                    { id: 24, topic: "廚房2" },
                    { id: 25, topic: "廚房3" },
                    { id: 26, topic: "小吃街" }
                  ]
                }
              ]
            },
            {
              id: 2,
              topic: "RDA+D5棟宿舍",
              direction: "right",
              expanded: true,
              children: [
                {
                  id: 7,
                  topic: "RDA輔房總表",
                  expanded: true,
                  children: [
                    { id: 27, topic: "冰機" },
                    { id: 28, topic: "水泵" },
                    { id: 29, topic: "污水池" },
                    { id: 30, topic: "地下室" },
                    { id: 31, topic: "水錶房" }
                  ]
                },
                {
                  id: 8,
                  topic: "D5棟宿"
                },
                {
                  id: 9,
                  topic: "RDA-1",
                  expanded: true,
                  "children": [
                    { id: 32, topic: "PSC產線" },
                    { id: 33, topic: "4#污水池" }
                  ]
                },
                {
                  id: 10,
                  topic: "RDA-2",
                  expanded: true,
                  children: [
                    { id: 34, "topic": "RDA宿舍1" },
                    { id: 35, "topic": "RDA宿舍2" }
                  ]
                }
              ]
            },
            {
              id: 3,
              topic: " F0廠",
              direction: "right"
            },
            {
              id: 4,
              topic: " 備用",
              direction: "right"
            }
          ]
        }
      },
      mind2: {
        meta: {
          name: "jsMind",
          author: "CMH",
          version: "0.2"
        },
        format: "node_array",
        data: [
          {
            id: "head",
            topic: "乙線",
            isroot: true
          },
          // {"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},
          {
            id: 1,
            parentid: "head",
            topic: "9~14棟宿舍",
            direction: "left",
            expanded: true
          },
          {
            id: 5,
            parentid: 1,
            topic: "TR1總表",
            expanded: true,
          },
          { id: 10, parentid: 5, topic: "水泵1" },
          { id: 11, parentid: 5, topic: "水泵2" },
          { id: 12, parentid: 5, topic: "夜市" },
          { id: 13, parentid: 5, topic: "水泵3" },
          { id: 15, parentid: 5, topic: "1#冰機" },
          { id: 16, parentid: 5, topic: "2#冰機" },
          {
            id: 6,
            parentid: 1,
            topic: "TR2總表",
            expanded: true,
          },
          { id: 17, parentid: 6, topic: "9棟宿舍" },
          { id: 18, parentid: 6, topic: "10棟宿舍" },
          { id: 19, parentid: 6, topic: "11棟宿舍" },
          { id: 20, parentid: 6, topic: "12棟宿舍" },
          { id: 21, parentid: 6, topic: "13棟宿舍" },
          { id: 22, parentid: 6, topic: "14棟宿舍" },
          { id: 23, parentid: 6, topic: "3#冰機" },
          { id: 24, parentid: 6, topic: "水泵房" },
          { id: 25, parentid: 6, topic: "5#污水池" },
          {
            id: 2,
            parentid: "head",
            topic: "D1~D4棟宿舍",
            direction: "right"
          },
          {
            id: 7,
            parentid: 2,
            topic: "TR9總表",
            expanded: true
          }, { id: 26, parentid: 7, topic: "生活水" },
          { id: 27, parentid: 7, topic: "门房" },
          { id: 28, parentid: 7, topic: "D23棟總電1" },
          { id: 29, parentid: 7, topic: "D23棟總電2" },
          { id: 30, parentid: 7, topic: "D24棟總電1" },
          { id: 31, parentid: 7, topic: "D24棟總電2" },
          {
            id: 8,
            parentid: 2,
            topic: "TR10總表",
            expanded: true
          },
          { id: 32, parentid: 8, topic: "D21棟總電1" },
          { id: 33, parentid: 8, topic: "D21棟總電2" },
          { id: 34, parentid: 8, topic: "D1~D2棟BF總電1" },
          {
            id: 9,
            parentid: 2,
            topic: "TR11總表",
            expanded: true
          }, { id: 35, parentid: 9, topic: "D1~D2棟BF總電2" },
          { id: 36, parentid: 9, topic: "D2棟一層照明" },
          { id: 35, parentid: 9, topic: "D21棟總電2" },
          { id: 36, parentid: 9, topic: "D21棟總電2" },
          { id: 35, parentid: 9, topic: "D1餐廳" },
          { id: 36, parentid: 9, topic: "D1餐廳" },
          {
            id: 3,
            parentid: "head",
            topic: " 備用1",
            direction: "right"
          },
          {
            id: 4,
            parentid: "head",
            topic: " 備用2",
            direction: "right"
          }
        ]
      }

    }
  },
  methods: {
    //加上点击事件
    showContent() {
      console.log(this.jm.get_selected_node());

    },
    // 缩小
    zoomOut() {
      // console.log(this.jm.view.zoomOut());
      // console.log(this.$refs.zoomOut.disabled);
      if (this.jm.view.zoomOut()) {
        this.$refs.zoomOut.disabled = false
      } else {
        this.$refs.zoomOut.disabled = true
      }
    },
    // 放大
    zoomIn() {
      if (this.jm.view.zoomIn()) {
        this.$refs.zoomIn.disabled = false
      } else {
        this.$refs.zoomIn.disabled = true
      }
    }
  },
  mounted() {
    this.jm = this.$refs.jsMind.jm
  }
})
</script>
<style scoped>
#content {
  display: none;
  border: 1px solid rebeccapurple;
}
#content:hover {
  display: block;
}
</style>
